
/**
 * [html: <canvas id="pie1"></canvas>]
 * [js: new Chart("pie1").ratePie(60);]
 * author:zhengyong
 * create:2016-05-11
 */
window.Chart2=function(domId){
  var canvas = document.getElementById(domId);
  var ctx = canvas.getContext("2d");
  var W = canvas.width;
  var H = canvas.height;
  var deg=0,new_deg=0,dif=0;
  var text,text_w;
  var R=W<H?W:H;//先默认环半径为canvas宽度
  var bgR=(R-R/3)/2;//内环背景半径
  var linkW=R/2-bgR;//环宽度=(W/2-内半径)
  var inW=linkW/3;//内环宽度=环宽度*1/3
  var outW=linkW*2/5;//外环宽度=环宽度*2/3
  var outW2=linkW*2/3;//外环宽度=环宽度*2/3
  var inR=bgR+inW/2;//内环半径=内半径+内环宽度/2
  var outR=bgR+inW+outW/2;//外环半径=内半径+内环宽度+外环宽度/2
  var $this=this;
  $this.ratePieNoAnimation2=function(number){
      deg=360*number/100;
        //底色大
      ctx.clearRect(0,0,W,H);
      ctx.beginPath();
      var grd = ctx.createLinearGradient(0,H, W, 0);//颜色渐变的起始坐标和终点坐标
          ctx.strokeStyle = grd;//生成的颜色块赋值给样式
      ctx.lineWidth=outW;
      ctx.arc(W/2,H/2,outR,0,Math.PI*2,false);
      ctx.stroke();
      

      //外层
      var r = deg*Math.PI/180;
      ctx.beginPath();
      var grd = ctx.createLinearGradient(0,H, W, 0);
      grd.addColorStop(0, "#298E06");
      grd.addColorStop(1, "#C4FF86");
      
      ctx.strokeStyle = grd;
      ctx.lineWidth=outW2;
      ctx.arc(W/2,H/2,outR,0-90*Math.PI/180,r-90*Math.PI/180,false);
      ctx.stroke();
      
      
      
  };

  $this.ratePie2=function(number){
        var i=0;
        var t2= setInterval(function(){
          if(i==number){
              clearInterval(t2);
          }else{
              number>0?i++:i--;
          }
          $this.ratePieNoAnimation2(i);
          if(i > 100 || i < -100){//如果数字太大，取消动画效果
              $this.ratePieNoAnimation2(number);
              clearInterval(t2);
          }
        }, 2000/(number>0?number:-number));
  }
}


